import React, { Component } from 'react'
import { Layout, Form, Input, Button, Card, message } from 'antd';


import './profile.less'

import { getLocalStorage, setLocalStorage } from '../../../utils/utils'
import { PostApi } from '../../../api/request'
import UploadAvatar from '../../../components/uploadAvatar/uploadAvatar'

const { Footer } = Layout;
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};



class Profile extends Component {
    onFinish = async values => {
        let res = await PostApi('/updateInfo', values)
        if (res.data.code === 200) {
            setLocalStorage('userInfo', JSON.stringify(res.data.data))
            message.destroy()
            message.success({ content: res.data.msg, duration: 5 });
        } else {
            message.destroy()
            message.error({ content: res.data.msg, duration: 5 });
        }
    };
    render() {
        const userInfo = JSON.parse(getLocalStorage('userInfo'))
        return (
            <Layout className="layout" style={{ backgroundColor: 'white' }}>
                <Card title={userInfo.nickname ? userInfo.nickname + ' 个人资料' : userInfo.account + ' 个人资料'} bordered={false} style={{ width: "50%", height: "100%", margin: "0 auto" }} headStyle={{ textAlign: 'center' }}>
                    <Form {...layout} name="nest-messages" onFinish={this.onFinish} initialValues={userInfo} >
                        <Form.Item label="上传头像" >
                            <UploadAvatar account={userInfo.account} avatarUrl={userInfo.avatarurl} />
                        </Form.Item>
                        <Form.Item label="菩提账号" name="account" >
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item label="绑定邮箱" name="email" rules={[{ type: 'email' }]}>
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item name="nickname" label="用户昵称" >
                            <Input />
                        </Form.Item>
                        <Form.Item name="blog" label="个人博客" >
                            <Input />
                        </Form.Item>
                        <Form.Item name="sign" label="简介"  >
                            <Input.TextArea />
                        </Form.Item>
                        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                            <Button type="primary" size="large" htmlType="submit">
                                修改资料
                           </Button>
                        </Form.Item>
                    </Form>
                </Card>
                <Footer style={{ textAlign: 'center' }}>©2019-2020 重庆菩提网络(www.liil.site) 版权所有.</Footer>
            </Layout >
        )
    }

}

export default Profile
